<script setup lang="ts">
import { reactive, ref, watch, computed } from 'vue'

const props = defineProps({

  width: {
    type: String,
    default: '400px'
  },
  height: {
    type: String,
    default: '40px'
  },

  backgroundColor: {
    type: String,
    default: '#EBEBEB'
  }
})


let keyWords = ref('')

let emitFn = defineEmits(['handler'])


// 监听数据变化 传值给父组件
watch(keyWords, () => {
  emitFn('handler', keyWords)
  }
)


const fn = () => {
  // 第一个参数是 自定义事件名称  第二个参数是 传过去的值
  emitFn('handler', keyWords)
}


let height = props.height
let width = props.width
let background = props.backgroundColor

</script>

<template>

  <div class="search">
    <input type="text" class="search__input" placeholder="平面设计" v-model="keyWords">
    <div class="search__icon">
      <el-icon>
        <Search />
      </el-icon>
    </div>
  </div>

</template>
    
<style scoped lang="scss">
/*  SEARCH  */
.search {
  // grid-column: 3/4;
  // grid-row: 2/3;
  position: relative;
  display: flex;
  align-items: center;
}

.search__input {
  width: v-bind(width);
  height: v-bind(height);
  border: none;
  border-radius: 10px;
  font-size: 20px;
  padding-left: 3.8rem;
  box-shadow: inset 3px 3px 4px #c8d0e7, inset -3px -3px 4px #fff;
  background: none;
  font-family: inherit;
  color: #9baacf;
}



.search__input::placeholder {
  color: #bec8e4;
}

.search__input:focus {
  outline: none;
  box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
}

.search__input:focus+.search__icon {
  color: $blue-color;
}

.search__icon {
  height: 2rem;
  position: absolute;
  font-size: 2rem;
  padding: 0 1rem;
  display: flex;
  color: #9baacf;
  transition: 0.3s ease;
}
</style>